<template>
  <div>
     <div class="show-title" >基础用法</div>
     <div class="show-list">
       <div  v-for="(item,index) in list" :key='index' >
          <div class="show-item"  @click='clickShow(item.name,item.desc)' >
              <div>{{item.desc}}</div>
              <div>></div>
          </div>
          <hr v-if="index<list.length-1" >
       </div>
     </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {

  }
})
export default class Home extends Vue {
  // data 
  list = [
    {name:'text',desc:'文字提示'},
    {name:'loading',desc:'加载中...'},
    {name:'close',desc:'关闭'}
  ]
  // method
  clickShow(name:string,desc:string){
    switch(name){
      case 'text':
        this.$toast(desc);
      break;
      case 'loading':
        //this.$toast.loading(desc);
        this.$toast({
          message:desc,
          type:'loading',
          duration:10000
        })
      break;
      case 'close':
        this.$toast.close()
      break;
      default:
      break;
    }
  }
  //mounted
  mounted() {
    const background: any = document.querySelector("body");
    background.setAttribute("style", "background-color:#f6f6f6");
  }
  //destoryed
  destroyed() {
    const background: any = document.querySelector("body");
    background.setAttribute("style", "background-color:#ffffff");
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/common.scss";
</style>
